<template>
    <!-- 笔记详情 -->
    <div>
     <div v-for="item in list" :key="item.id">
        <div>
            <!-- 使用了vant 主键的轮播图样式 -->
            <van-swipe @change="onChange"  class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item   v-for="(i,index) in imgurl" :key="index">
                    <div class="img" :style="{backgroundImage:'url(' + i.u + ')'}"></div>
                </van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">{{ current  + 1 }}/{{ length }}</div>
                </template>
                </van-swipe>

        </div>
        <div class="qvanbu">
            <h1 class="tit">
                {{ item.title }}
            </h1>
        </div>
        <div class="qvanbu" v-for="it in title">
            <span class="tit-span">
               {{ it.c }}
            </span>
        </div>
        <div class="box qvanbu">
           <div class="box-text">
            <img class="usrimg" :src="item.author.p" alt="">
            <p>{{ item.author.n }}</p>
           </div>
           <button>收藏</button>
        </div>
        <div class="qvanbu text-box">
            <span>{{ item.publishtime }}</span>
            <span>{{ item.like_count }}点赞</span>
        </div>
     </div>
    </div>
</template>


<script>
// 引入vant
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

import { Notedetails } from '../api/index';

export default {
    data (){
        return {
            imgurl:"",
            list:[],
            current:0,
            length:0,
            title:[]
        }
    },
    methods:{
        onChange(index) {
         this.current = index;
    },
    },
    // created 是vue生命周期钩子，表示页面创建就执行这个函数内容
    async created(){
        let { id } = this.$route.query
        await Notedetails(id)
        .then(
            Error=>{
                console.log(Error);
                let {result:{note},state} = Error
                if(state == "success"){
                    let {images} = note
                    this.imgurl = images
                    this.length = images.length
                    this.list = [note]
                    this.title = note?.contents
                    console.log(note?.contents);
                    
                }
            }
        )
    }
}

</script>

<style scoped lang="less">
 .text-box{
    display: flex;
    justify-content: space-between
 }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
.tit-span{
    font-size: 20px;
    margin: 10px auto;
}
.box-text{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.qvanbu{
    margin: 10px auto;
    padding:  0 10px;
    .tit{
        font-size: 18px;
    }
}
.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.usrimg{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.video{
    width: 100%;
    height: 300px;
}
.img{
    width: 100%;
    height: 200px;
    background-size: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

</style>